<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <#-- 包含其他文件的内容 -->
    <#include "../common/header.ftl"/>
    <script src="/js/plugins/jqueryForm/jquery.form.js"></script>
        <link rel="stylesheet" href="/js/treeview/bootstrap-treeview.min.css">
        <script src="/js/treeview/bootstrap-treeview.min.js"></script>
        <script src="/js/plugins/message/jquery.bootstrap.min.js"></script>

    <script>
        $(function () {
            $.get("/region/selectByParentId.do",{status:"tree"},function (data) {
                var defaultData = [{text: '全部地区',nodes: data}];
                $('#treeview1').treeview({
                    data: defaultData,
                    showTags:true,
                    lazyLoad:function (node) {
                        $.get("/region/selectByParentId.do",{status:"tree",parentId:node.id},function (data) {
                            $('#treeview1').treeview("addNode",[data,node])
                        })
                    },
                    onNodeSelected:function (event,data) {
                        $.get("/region/selectByParentId.do",{parentId:data.id},function (data) {
                            $("#tbody").html("");
                            $.each(data,function (index,ele) {
                               var tr =  $("#temp tr").clone(true);
                                $(tr).find("td:nth-child(1)").html(index+1);
                                $(tr).find("td:nth-child(2)").html(ele.name);
                                $(tr).find("td:nth-child(3) button").attr("data-json",ele.json);
                                if (ele.state == 1) {
                                    $(tr).find("td:nth-child(3) button:nth-child(2)").html("取消推荐")
                                }
                                tr.appendTo($("#tbody"));
                            })
                        })
                    }

                });
            })


            $(".inputBtn").click(function () {
                var json=$(this).data("json");
                $("#editForm input").val("");
                var tree= $('#treeview1').treeview('getSelected');
                console.log(tree[0]);
                if (tree[0]) {
                    $("#editForm input[name='parent.name']").val(tree[0].text);
                    $("#editForm input[name='parent.id']").val(tree[0].id);
                }
                if (json) {
                    $("#editForm input[name='id']").val(json.id);
                    $("#editForm input[name='name']").val(json.name);
                    $("#editForm input[name='parent.name']").val(json.parentName);
                    $("#editForm input[name='parent.id']").val(json.parentId);
                    console.log(json);
                    if (!json.parent) {
                        $("#editForm input[name='parent.name']").val("全部地区");
                    }
                }
                    $("#inputModal").modal("show")
            })
            $(".submitBtn").click(function () {
                $("#editForm").ajaxSubmit(function (data) {
                    if (data.success) {
                        reload();
                    }else{
                        $.messager.alert(data.msg);
                    }
                })
            })

            $(".hotBtn").click(function () {
                var json = $(this).data("json");
                $.messager.confirm("提示","是否确定设为推荐",function () {
                    $.get("/region/updateStatus.do",{id:json.id,status:json.state},function (data) {
                        if (data.success) {
                            reload();
                        }else{
                            $.messager.alert(data.msg);
                        }
                    })
                })

            })


        })
    </script>
</head>
<body>
<table id="temp" style="display: none">
    <tr>
        <td></td>
        <td></td>
        <td>
            <button role="button" class="btn btn-info btn-xs inputBtn" >编辑</button>
            <button class="btn btn-danger btn-xs hotBtn">设为推荐</button>
        </td>
    </tr>
</table>


<div class="container " style="margin-top: 20px">
    <#include "../common/top.ftl"/>
    <div class="row">
        <div class="col-sm-3">
            <#-- 往数据模型中填充一个属性 -->
            <#assign menu="region"/>
            <#include "../common/menu.ftl"/>
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">地区管理</h1>
                </div>
            </div>
            <button type="button" class="btn btn-success inputBtn" >添加</button><br/>
            <!--高级查询--->
            <form class="form-inline" id="searchForm" action="/region/selectByParentId.do" method="post">
                <input type="hidden" name="currentPage" id="currentPage" value="1">
                <input type="hidden" name="parentId">
            </form>
            <div class="row">
                 <div class="region">
                     <div class="col-md-4">
                         <div id="treeview1"></div>
                     </div>

                     <div class="col-md-8">
                         <table class="table table-striped table-hover" >
                             <thead>
                             <tr>
                                 <th>编号</th>
                                 <th>名称</th>
                             </tr>
                             </thead>
                             <tbody id="tbody">

                             </tbody>
                         </table>
                     </div>
                 </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="inputModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">编辑</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/region/saveOrUpdate.do" method="post" id="editForm">
                    <input type="hidden"  name="id">
                    <input type="hidden"  name="parent.id">
                    <div class="form-group" >
                        <label class="col-sm-4 control-label">名称：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="name"
                                   placeholder="请输入地区的名称">

                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 control-label" >上级地区：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="parent.name" readonly>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    <span class="glyphicon glyphicon-off"></span> 关闭
                </button>
                <button type="button" class="btn btn-primary submitBtn">
                    <span class="glyphicon glyphicon-saved"></span> 保存
                </button>
            </div>
        </div>
    </div>
</div>

<script>

</script>
</body>
</html>